<template>
  <div>
    <a-row>
      <a-col :flex="1">
        <a-form
          :model="formModel"
          :label-col-props="{ span: 6 }"
          :wrapper-col-props="{ span: 18 }"
          label-align="left"
          ref="searchFormRef"
        >
          <a-row :gutter="16">
            <a-col :span="8">
              <a-form-item field="number" label="品名">
                <a-select
                  :placeholder="'请选择品名---' + productNameList.length + '类'"
                  v-model="form.product_name_id"
                  allow-clear
                >
                  <a-option
                    v-for="(item, i) in productNameList"
                    :key="i"
                    v-model="item.product_name_id"
                    :value="item.id"
                    :label="item.manage_product_name"
                  ></a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item field="name" label="供货厂家">
                <a-select
                  :placeholder="'请选择供货厂家---' + GonghuoList.length + '家'"
                  v-model="form.gonghuo_id"
                  allow-clear
                >
                  <a-option
                    v-for="(item, i) in GonghuoList"
                    :key="i"
                    v-model="item.gonghuo_id"
                    :value="item.id"
                    :label="item.manage_gonghuo_name"
                  ></a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item field="name" label="存放地点">
                <a-select
                  :placeholder="'请选择存放地点---' + addressList.length + '处'"
                  v-model="form.address_id"
                  allow-clear
                >
                  <a-option
                    v-for="(item, i) in addressList"
                    :key="i"
                    v-model="item.address_id"
                    :value="item.id"
                    :label="item.manage_address"
                  ></a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item field="name" label="库管">
                <a-select
                  :placeholder="'请选择库管---' + houseList.length + '名'"
                  v-model="form.house_id"
                  allow-clear
                >
                  <a-option
                    v-for="(item, i) in houseList"
                    :key="i"
                    v-model="item.house_id"
                    :value="item.id"
                    :label="item.house_name"
                  ></a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item field="createdTime" label="进货时间">
                <a-range-picker style="width: 100%" v-model="form.jinghuo_time" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-col>
      <a-divider style="height: 84px" direction="vertical" />
      <a-col :flex="'86px'" style="text-align: right">
        <a-space direction="vertical" :size="18">
          <a-button type="primary" @click="getManageList">
            <template #icon>
              <icon-search />
            </template>
            {{ $t('searchTable.form.search') }}
          </a-button>
          <a-button @click="reset">
            <template #icon>
              <icon-refresh />
            </template>
            {{ $t('searchTable.form.reset') }}
          </a-button>
        </a-space>
      </a-col>
    </a-row>
    <a-divider style="margin-top: 0" />
  </div>
</template>

<script lang="ts" setup>
import { reactive,ref } from 'vue';

const props = defineProps({
  productNameList: { type: Array, default: () => [] },
  houseList: { type: Array, default: () => [] },
  GonghuoList: { type: Array, default: () => [] },
  addressList: { type: Array, default: () => [] },
  getManageList:{ type: Function, default: () => {} },
});
const searchFormRef = ref()

const form = reactive({
  product_name_id: '',
  gonghuo_id:'',
  address_id:'',
  house_id:'',
  jinghuo_time:[],
});
const reset = () => {
  form.product_name_id = '';
  form.gonghuo_id = '';
  form.address_id = '';
  form.house_id = '';
  form.jinghuo_time = [];
  props.getManageList()
}
defineExpose({
  form,
});
</script>

<style scoped lang="less">
</style>